/*
 * @Author: evan.wan
 * @Date:   2016-08-02 15:55:20
 * @Last Modified by:   evan.wan
 * @Last Modified time: 2016-08-02 11:16:28
 */

'use strict';
define([
    '../../../framework/base/baseView',
    '../../../framework/bean/ecCreativeTemplate',
    './colpick',
    './modernizr.custom',
], function (BaseView,
             ecCreativeTemplateModel) {
    function me() {
        BaseView.apply(this, arguments);
        var self = this;

        this.init = function (who, mainCode, minorCode, callback) {
            self.who = who;
            self.mainCode = mainCode;
            self.minorCode = minorCode;
            self.callback = callback;
            self.whatBg = null;         //选择的模板是否有背景色 ,空 无背景色  有 mainBgColor主体背景 joinBgColor拼接背景
            self.$root = $('#view2');
            self.step1Key = 'createMaterialStep1'; //step1缓存
            self.step2Key = 'createMaterialStep2'; //step2缓存
            self.styleCheck = true;
            self.colorCheck = true;
            self.elementsInFStyle = [];
            self.elementsInSStyle = [];

            self.render();
        }

        this.render = function () {
            self.$bgDiv = self.$root.find('#bg-div');
            self.$highEleStyle = self.$root.find('#high-ele-style');
            self.$highEleColor = self.$root.find('#high-ele-color');
            self.$elementBg = self.$root.find('#element-bg');
            self.$elementFont = self.$root.find('#element-font');
            self.event();

        }

        this.event = function () {
            self.initStep2HighView();

            //切换样式、颜色
            self.$root.find('.btn-step2-high').off('click').on('click', $.proxy(self.changeStyleColor, self));

            //点击关联 checkbox
            self.$root.find('#ele-associate').off('click').on('click', $.proxy(self.changeCheck, self));

            //生成预览 button事件
            self.$root.find('.btn-high-generte').off('click').on('click', $.proxy(self.highEditGenerate, self));

            //高级编辑下一步
            self.$root.find('.high-btn-next').off('click').on('click', $.proxy(self.highSubmitCreate, self));

            //高级编辑重置
            self.$root.find('.high-edit-reset').off('click').on('click', $.proxy(self.reset, self));

            $('.color-box').colpick({
                colorScheme: 'light',
                layout: 'hex',
                color: 'ff8800',
                submitText: I18N.getText('createMaterial', 'ok'),
                onSubmit: function (hsb, hex, rgb, el) {
                    $(el).css('background-color', '#' + hex);
                    if($(el).attr('bg'))
                        self.$bgDiv.find('.high-rond').removeClass('bgColorActive');
                    var nextInput = $(el).next().find('input');
                    if(!nextInput.prop('disabled'))
                        nextInput.attr('value', hex);
                    $(el).colpickHide();
                }
            });
        }

        this.changeStyleColor = function(e) {
            $(e.currentTarget).addClass("focus").siblings().removeClass("focus");
            var which = $(e.currentTarget).data('which');
            if(which == '1') {
                self.$root.find('.element-style-related .checkbox-mark-word').text(I18N.getText('createMaterial', 'eleAssociate1'));
                self.$bgDiv.addClass('hidden');
                self.$elementBg.addClass('hidden');
                self.$elementFont.addClass('hidden');
                self.$highEleStyle.removeClass('hidden');
                self.$highEleColor.addClass('hidden');
                self.$root.find('#ele-associate').prop("checked", self.styleCheck);
            } else if (which == '2'){
                self.$root.find('.element-style-related .checkbox-mark-word').text(I18N.getText('createMaterial', 'eleAssociate2'));
                if(self.whatBg)
                    self.$bgDiv.removeClass('hidden');
                self.$elementBg.removeClass('hidden');
                self.$elementFont.removeClass('hidden');
                self.$highEleColor.removeClass('hidden');
                self.$highEleStyle.addClass('hidden');
                self.$root.find('#ele-associate').prop("checked", self.colorCheck);
            }
        }


        /**
         * { 请求高级编辑数据 }
         *
         * @method     initView
         */
        this.initStep2HighView = function () {
            var param = {
                weFeedId: self.kit.getCache('createMaterialStep1', 'feedId'),
                templateId: self.kit.getCache(self.step2Key, 'ecTemplateId'),
                primaryElement: {
                    parentCode : self.mainCode
                },
                auxiliaryElement : {
                    parentCode : self.minorCode
                }
            }
            ecCreativeTemplateModel.initAdvanced(param, function (res) {
                var colorArr = ['000000','ffffff', 'dc0a42', '999999', 'ae895f'];
                self.$root.find('.btn-step2-high').removeClass('focus');
                self.$root.find('.btn-step2-high').eq(0).addClass('focus');

                self.$elementBg.addClass('hidden');
                self.$elementFont.addClass('hidden');
                self.$highEleStyle.removeClass('hidden');
                self.$highEleColor.addClass('hidden');
                self.$bgDiv.addClass('hidden');

                self.$elementBg.find('input').eq(0).attr('value', '');
                self.$elementBg.find('input').eq(0).parent().prev().css('background-color', 'white');
                self.$elementFont.find('input').eq(0).attr('value', '');
                self.$elementFont.find('input').eq(0).parent().prev().css('background-color', 'white');
                self.$elementBg.find('input').eq(1).attr('value', '');
                self.$elementBg.find('input').eq(1).parent().prev().css('background-color', 'white');
                self.$elementFont.find('input').eq(1).attr('value', '');
                self.$elementFont.find('input').eq(1).parent().prev().css('background-color', 'white');

                //如果模板是主体背景
                if(res.mainBgColor) {
                    self.whatBg = 'mainBgColor';
                    self.$bgDiv.find('').text(I18N.getText('createMaterial', 'mainBg'));
                    if($.inArray(res.mainBgColor, colorArr) > -1) {
                        self.$bgDiv.find('.x'+res.mainBgColor).parent().addClass('bgColorActive');
                    } else {
                        self.$bgDiv.find('.color-box').css('background-color', '#' + res.mainBgColor);
                        self.$bgDiv.find('input').attr('value', res.mainBgColor);
                    }
                    self.bindBgColorCircle();
                }
                //如果模板是拼接背景
                if(res.joinBgColor) {
                    self.whatBg = 'joinBgColor';
                    self.$bgDiv.find('').text(I18N.getText('createMaterial', 'spliceBg'));
                    if($.inArray(res.joinBgColor, colorArr) > -1) {
                        self.$bgDiv.find('.x'+res.joinBgColor).parent().addClass('bgColorActive');
                    } else {
                        self.$bgDiv.find('.color-box').css('background-color', '#' + res.joinBgColor);
                        self.$bgDiv.find('input').attr('value', res.joinBgColor);
                    }
                    self.bindBgColorCircle();
                }

                //渲染主要元素样式
                if(res.primary) {
                    var cnt1 = 0;
                    $('#high-ele-color .main-ele-container ul').empty();
                    $('#high-ele-style .main-ele-container ul').empty();
                    $.each(res.primary.styleGroups, function(k, v){
                        //$('#high-ele-style')
                        var tempClass;
                        if(cnt1 == 0) {
                            cnt1++;
                            _.each(v.elements, function(el){
                                if(el.elementColorName == v.defaultStyleColor) {
                                    tempClass = 'ele-active';
                                    if(el.backgroundColor) {
                                        var mainBg = self.$elementBg.find('input').eq(0);
                                        mainBg.removeAttr('disabled');
                                        mainBg.attr('value', el.backgroundColor.substring(1));
                                        mainBg.parent().prev().css('background-color', el.backgroundColor);
                                        mainBg.parent().prev().removeClass('colpick-not');
                                    }
                                    if(el.wordColor) {
                                        var mainWord = self.$elementFont.find('input').eq(0);
                                        mainWord.removeAttr('disabled');
                                        mainWord.attr('value', el.wordColor.substring(1));
                                        mainWord.parent().prev().css('background-color', el.wordColor);
                                        mainWord.parent().prev().removeClass('colpick-not');
                                    }
                                } else {
                                    tempClass = 'ele-normal';
                                }
                                $('#high-ele-color .main-ele-container ul').append('<li class="'+ tempClass +'" elementId="'+ el.id +'" flag="main" elementCode="'+ el.elementCode +'" wordColor="'+ ((typeof(el.wordColor) === "undefined") ? '':el.wordColor) +'" bgColor="'+ ((typeof(el.backgroundColor) === "undefined") ? '':el.backgroundColor) +'" color="'+ el.elementColorName +'"><div class="element-img-div"><img class="liImg" src="'+ (el.elementPreview ? el.elementPreview : el.elementImg) +'"></div></li>');
                            });
                        }
                        _.each(v.elements, function(el){
                            var oo = el;
                            oo.tt = k.substring(1);
                            self.elementsInFStyle.push(oo);
                            if(el.elementColorName == v.defaultStyleColor) {
                                if(cnt1 == 1) {
                                    tempClass= 'ele-active';
                                    cnt1++;
                                } else {
                                    tempClass = 'ele-normal';
                                }
                                $('#high-ele-style .main-ele-container ul').append('<li class="'+ tempClass +'" elementId="'+ el.id +'" flag="main" elementCode="'+ el.elementCode +'" wordColor="'+ ((typeof(el.wordColor) === "undefined") ? '':el.wordColor) +'" bgColor="'+ ((typeof(el.backgroundColor) === "undefined") ? '':el.backgroundColor) +'" styleGroup="'+ k.substring(1) +'"><div class="element-img-div"><img class="liImg" src="'+ (el.elementPreview ? el.elementPreview : el.elementImg) +'"></div></li>');
                            }
                        });
                    });
                }
                //渲染辅助元素样式
                if(res.auxiliary) {
                    var cnt2 = 0;
                    $('#high-ele-color .second-ele-container ul').empty();
                    $('#high-ele-style .second-ele-container ul').empty();

                    $.each(res.auxiliary.styleGroups, function(k, v){
                        var tempClass;
                        if(cnt2 == 0) {
                            cnt2++;
                            _.each(v.elements, function(el){
                                if(el.elementColorName == v.defaultStyleColor) {
                                    tempClass = 'ele-active';
                                    if(el.backgroundColor) {
                                        var joinBg = self.$elementBg.find('input').eq(1);
                                        joinBg.removeAttr('disabled');
                                        joinBg.attr('value', el.backgroundColor.substring(1));
                                        joinBg.parent().prev().css('background-color', el.backgroundColor);
                                        joinBg.parent().prev().removeClass('colpick-not');
                                    }
                                    if(el.wordColor) {
                                        var joinWord = self.$elementFont.find('input').eq(1);
                                        joinWord.removeAttr('disabled');
                                        joinWord.attr('value', el.wordColor.substring(1));
                                        joinWord.parent().prev().css('background-color',  el.wordColor);
                                        joinWord.parent().prev().removeClass('colpick-not');
                                    }
                                } else {
                                    tempClass = 'ele-normal';
                                }
                                $('#high-ele-color .second-ele-container ul').append('<li class="'+ tempClass +'"  elementId="'+ el.id +'" flag="join" elementCode="'+ el.elementCode +'" wordColor="'+ ((typeof(el.wordColor) === "undefined") ? '':el.wordColor) +'" bgColor="'+ ((typeof(el.backgroundColor) === "undefined") ? '':el.backgroundColor) +'" color="'+ el.elementColorName +'"><div class="element-img-div"><img class="liImg" src="'+ (el.elementPreview ? el.elementPreview : el.elementImg) +'"></div></li>');
                            });
                        }
                        _.each(v.elements, function(el){
                            var oo = el;
                            oo.tt = k.substring(1);
                            self.elementsInSStyle.push(oo);
                            if(el.elementColorName == v.defaultStyleColor) {
                                if(cnt2 == 1) {
                                    tempClass= 'ele-active';
                                    cnt2++;
                                } else {
                                    tempClass = 'ele-normal';
                                }
                                $('#high-ele-style .second-ele-container ul').append('<li class="'+ tempClass +'" elementId="'+ el.id +'" flag="join" elementCode="'+ el.elementCode +'" wordColor="'+ ((typeof(el.wordColor) === "undefined") ? '':el.wordColor) +'" bgColor="'+ ((typeof(el.backgroundColor) === "undefined") ? '':el.backgroundColor) +'" styleGroup="'+ k.substring(1) +'"><div class="element-img-div"><img class="liImg" src="'+ (el.elementPreview ? el.elementPreview : el.elementImg) +'"></div></li>');
                            }
                        });
                    });
                }
                self.bindElementInStyle();
                self.bindElementInColor();
            });
        }

        /**
         * 样式中元素选择 交互
         */
        this.bindElementInStyle = function () {
            var eachEleLi = self.$root.find('#high-ele-style .element-img-container ul li');
            eachEleLi.off('click').on('click', function () {
                $(this).siblings().addClass("ele-normal");
                $(this).addClass("ele-active").siblings().removeClass("ele-active");

                //主/辅元素联合变动
                var eleAssocite = self.$root.find('#ele-associate').prop("checked");

                //选择元素 元素背景颜色和元素字体颜色联动
                var w =  $(this).attr('flag');
                var styleGroup = $(this).attr('styleGroup');
                if(styleGroup) {
                    if(w == 'main') {
                        $('#high-ele-color .main-ele-container ul').empty();
                        var elementGroup = _.groupBy(self.elementsInFStyle, function(o){return o.tt});

                        for(var q in elementGroup) {
                            if(q == styleGroup) {
                                $.each(elementGroup[q], function(i,el) {
                                    $('#high-ele-color .main-ele-container ul').append('<li class="'+ (i==0? 'ele-active' : 'ele-normal') +'"  elementId="'+ el.id +'" flag="main" elementCode="'+ el.elementCode +'" wordColor="'+ ((typeof(el.wordColor) === "undefined") ? '':el.wordColor) +'" bgColor="'+ ((typeof(el.backgroundColor) === "undefined") ? '':el.backgroundColor) +'" color="'+ el.elementColorName +'"><div class="element-img-div"><img class="liImg" src="'+ (el.elementPreview ? el.elementPreview : el.elementImg) +'"></div></li>');
                                });
                            }
                        }

                        if(eleAssocite) {
                            $('#high-ele-color .second-ele-container ul').empty();
                            var elementGroupb = _.groupBy(self.elementsInSStyle, function (o) {
                                return o.tt
                            });

                            for (var q in elementGroupb) {
                                if (q == styleGroup) {
                                    $.each(elementGroupb[q], function (i, el) {
                                        $('#high-ele-color .second-ele-container ul').append('<li class="' + (i == 0 ? 'ele-active' : 'ele-normal') + '"  elementId="' + el.id + '" flag="join" elementCode="' + el.elementCode + '" wordColor="' + ((typeof(el.wordColor) === "undefined") ? '' : el.wordColor) + '" bgColor="' + ((typeof(el.backgroundColor) === "undefined") ? '' : el.backgroundColor) + '" color="' + el.elementColorName + '"><div class="element-img-div"><img class="liImg" src="' + (el.elementPreview ? el.elementPreview : el.elementImg) + '"></div></li>');
                                    });
                                }
                            }
                        }
                    } else if(w == 'join') {
                        $('#high-ele-color .second-ele-container ul').empty();
                        var elementGroupm = _.groupBy(self.elementsInSStyle, function(o){return o.tt});

                        for(var q in elementGroupm) {
                            if(q == styleGroup) {
                                $.each(elementGroupm[q], function(i,el) {
                                    $('#high-ele-color .second-ele-container ul').append('<li class="'+ (i==0? 'ele-active' : 'ele-normal') +'"  elementId="'+ el.id +'" flag="join" elementCode="'+ el.elementCode +'" wordColor="'+ ((typeof(el.wordColor) === "undefined") ? '':el.wordColor) +'" bgColor="'+ ((typeof(el.backgroundColor) === "undefined") ? '':el.backgroundColor) +'" color="'+ el.elementColorName +'"><div class="element-img-div"><img class="liImg" src="'+ (el.elementPreview ? el.elementPreview : el.elementImg) +'"></div></li>');
                                });
                            }
                        }

                        if(eleAssocite) {
                            $('#high-ele-color .main-ele-container ul').empty();
                            var elementGroupn = _.groupBy(self.elementsInFStyle, function (o) {
                                return o.tt
                            });

                            for (var q in elementGroupn) {
                                if (q == styleGroup) {
                                    $.each(elementGroupn[q], function (i, el) {
                                        $('#high-ele-color .main-ele-container ul').append('<li class="' + (i == 0 ? 'ele-active' : 'ele-normal') + '"  elementId="' + el.id + '" flag="main" elementCode="' + el.elementCode + '" wordColor="' + ((typeof(el.wordColor) === "undefined") ? '' : el.wordColor) + '" bgColor="' + ((typeof(el.backgroundColor) === "undefined") ? '' : el.backgroundColor) + '" color="' + el.elementColorName + '"><div class="element-img-div"><img class="liImg" src="' + (el.elementPreview ? el.elementPreview : el.elementImg) + '"></div></li>');
                                    });
                                }
                            }
                        }
                    }
                    if(eleAssocite) {
                        console.log($(this).attr('styleGroup'));
                        $(this).parent().parent().next().find('li').removeClass("ele-active").addClass("ele-normal");
                        $(this).parent().parent().next().find('li[styleGroup="'+ $(this).attr('styleGroup') +'"]').addClass("ele-active");

                        $(this).parent().parent().prev().find('li').removeClass("ele-active").addClass("ele-normal");
                        $(this).parent().parent().prev().find('li[styleGroup="'+ $(this).attr('styleGroup') +'"]').addClass("ele-active");
                    }
                    self.bindElementInColor();
                }
            });
        }

        /**
         * 颜色中元素选择 交互
         */
        this.bindElementInColor = function () {
            var eachEleLi = self.$root.find('#high-ele-color .element-img-container ul li');
            eachEleLi.off('click').on('click', function () {
                $(this).siblings().addClass("ele-normal");
                $(this).addClass("ele-active").siblings().removeClass("ele-active");

                //主/辅元素联合变动
                var eleAssocite = self.$root.find('#ele-associate').prop("checked");

                //选择元素 元素背景颜色和元素字体颜色联动
                var w =  $(this).attr('flag');
                var bgColor = $(this).attr('bgColor');
                var wordColor = $(this).attr('wordColor');
                var color =  $(this).attr('color');
                if(color) {
                    if(w == 'main') {
                        var meBg = self.$elementBg.find('input').eq(0);
                        var meWord = self.$elementFont.find('input').eq(0);
                        if(bgColor) {
                            meBg.removeAttr('disabled');
                            meBg.attr('value', bgColor.substring(1));
                            meBg.parent().prev().css('background-color', bgColor);
                            meBg.parent().prev().removeClass('colpick-not');
                        } else {
                            meBg.prop('disabled', true);
                            meBg.parent().prev().addClass('colpick-not');
                        }
                        if(wordColor) {
                            meWord.removeAttr('disabled');
                            meWord.attr('value', wordColor.substring(1));
                            meWord.parent().prev().css('background-color', wordColor);
                            meWord.parent().prev().removeClass('colpick-not');
                        } else {
                            meWord.prop('disabled', true);
                            meWord.parent().prev().addClass('colpick-not');
                        }
                        if(eleAssocite) {
                            var other = $(this).parent().parent().next().find('li[color="'+ color +'"]');
                            var otherBgColor = other.attr('bgColor');
                            var otherWordColor = other.attr('wordColor');
                            var otherBg = self.$elementBg.find('input').eq(1);
                            var otherWord = self.$elementFont.find('input').eq(1);
                            if(otherBgColor) {
                                otherBg.removeAttr('disabled');
                                otherBg.attr('value', otherBgColor.substring(1));
                                otherBg.parent().prev().css('background-color', otherBgColor);
                                otherBg.parent().prev().removeClass('colpick-not');
                            } else {
                                otherBg.prop('disabled', true);
                                otherBg.parent().prev().addClass('colpick-not');
                            }
                            if(otherWordColor) {
                                otherWord.removeAttr('disabled');
                                otherWord.attr('value', otherWordColor.substring(1));
                                otherWord.parent().prev().css('background-color',  otherWordColor);
                                otherWord.parent().prev().removeClass('colpick-not');
                            } else {
                                otherWord.prop('disabled', true);
                                otherWord.parent().prev().addClass('colpick-not');
                            }
                        }
                    } else if (w == 'join') {
                        var meBg = self.$elementBg.find('input').eq(1);
                        var meWord = self.$elementFont.find('input').eq(1);
                        if(bgColor) {
                            meBg.removeAttr('disabled');
                            meBg.attr('value', bgColor.substring(1));
                            meBg.parent().prev().css('background-color', bgColor);
                            meBg.parent().prev().removeClass('colpick-not');
                        } else {
                            meBg.prop('disabled', true);
                            meBg.parent().prev().addClass('colpick-not');
                        }
                        if(wordColor) {
                            meWord.removeAttr('disabled');
                            meWord.attr('value', wordColor.substring(1));
                            meWord.parent().prev().css('background-color', wordColor);
                            meWord.parent().prev().removeClass('colpick-not');
                        } else {
                            meWord.prop('disabled', true);
                            meWord.parent().prev().addClass('colpick-not');
                        }

                        if(eleAssocite) {
                            var other = $(this).parent().parent().prev().find('li[color="'+ color +'"]');
                            var otherBgColor = other.attr('bgColor');
                            var otherWordColor = other.attr('wordColor');
                            var otherBg = self.$elementBg.find('input').eq(0);
                            var otherWord = self.$elementFont.find('input').eq(0);
                            if(otherBgColor) {
                                otherBg.removeAttr('disabled');
                                otherBg.attr('value', otherBgColor.substring(1));
                                otherBg.parent().prev().css('background-color', otherBgColor);
                                otherBg.parent().prev().removeClass('colpick-not');
                            } else {
                                otherBg.prop('disabled', true);
                                otherBg.parent().prev().addClass('colpick-not');
                            }
                            if(otherWordColor) {
                                otherWord.removeAttr('disabled');
                                otherWord.attr('value', otherWordColor.substring(1));
                                otherWord.parent().prev().css('background-color',  otherWordColor);
                                otherWord.parent().prev().removeClass('colpick-not');
                            } else {
                                otherWord.prop('disabled', true);
                                otherWord.parent().prev().addClass('colpick-not');
                            }
                        }

                    }
                    if(eleAssocite) {
                        $(this).parent().parent().next().find('li').removeClass("ele-active").addClass("ele-normal");
                        $(this).parent().parent().next().find('li[color="'+ $(this).attr('color') +'"]').addClass("ele-active");

                        $(this).parent().parent().prev().find('li').removeClass("ele-active").addClass("ele-normal");
                        $(this).parent().parent().prev().find('li[color="'+ $(this).attr('color') +'"]').addClass("ele-active");
                    }
                }
            });
        }


        /**
         * 点击关联check
         */
        this.changeCheck = function(e) {
            var tabFocus = self.$root.find('.btn-step2-high.focus').data('which');
            var check = $(e.currentTarget).prop('checked');
            if(tabFocus == '1')
                self.styleCheck = check;
            else if(tabFocus == '2')
                self.colorCheck = check;

        }

        /**
         * 模板背景色与圆圈 交互
         */
        this.bindBgColorCircle = function () {
            var eachBgColor = self.$bgDiv.find('.high-rond');
            eachBgColor.off('click').on('click', function () {
                $(this).addClass("bgColorActive").siblings().removeClass("bgColorActive");
            });
        }

        /**
         * { 高级编辑生成创意预览 }
         *
         * @method     generate
         */
        this.highEditGenerate = function(e) {
            //每次点生成 - 清空右侧预览区
            self.$root.find('.high-right-container').empty();

            var eleArr = [];
            var elements = self.kit.getCache(self.step2Key, 'elements');
            _.each(elements, function(el){
                if(el.major) {
                    el.elementCode = $('#high-ele-color .main-ele-container ul li.ele-active').attr('elementCode');
                    el.templateElementId = $('#high-ele-color .main-ele-container ul li.ele-active').attr('elementId');
                    el.backgroundColor =  self.$elementBg.find('input').eq(0).val();
                    el.wordColor = self.$elementFont.find('input').eq(0).val();
                } else {
                    el.elementCode = $('#high-ele-color .second-ele-container ul li.ele-active').attr('elementCode');
                    el.templateElementId = $('#high-ele-color .second-ele-container ul li.ele-active').attr('elementId');
                    el.backgroundColor =  self.$elementBg.find('input').eq(1).val();
                    el.wordColor = self.$elementFont.find('input').eq(1).val();
                }
                eleArr.push(el);
            });
            self.kit.setCache(self.step2Key, 'elements', eleArr);
            var options = self.kit.getCache('createMaterialStep1', 'options');
            var generateParams = {
                wefeedid: self.kit.getCache(self.step1Key, 'feedId'),
                ecTemplateId: self.kit.getCache(self.step2Key, 'ecTemplateId'),
                more: false,
                options: options,
                elements: eleArr
            }
            //选择的模板有背景色
            var bgColDiv = self.$bgDiv.find('.bgColorActive');
            console.log(bgColDiv)
            if(self.whatBg == 'mainBgColor') {
                if(bgColDiv.length)
                    generateParams.mainBgColor = bgColDiv.data('color').substring(1);
                else
                    generateParams.mainBgColor = self.$bgDiv.find('input').val();
            } else if(self.whatBg == 'joinBgColor') {
                if(bgColDiv.length)
                    generateParams.joinBgColor = bgColDiv.data('color').substring(1);
                else
                    generateParams.joinBgColor = self.$bgDiv.find('input').val();
            }
            ecCreativeTemplateModel.buildCreative(generateParams, function(res) {
                //生成创意后 回调 发轮询请求 预览数据
                console.log(res);
                if (res && res.length > 0) {
                    $.each(res, function(i, obj) {
                        self.$root.find('.high-right-container').append('<li class="thumbnail-loading"><div class="high-right-img"><a class="thumbnail" data-image="./imgs/imgloading.gif"><img style="padding-top: 45%;" src="./imgs/imgloading.gif"> </a></div></li>');
                        self.$root.find('.high-right-container .thumbnail').height(self.$root.find('.high-right-container .thumbnail').width());
                    });
                    self.updatePreviewDiv(res);
                }
            });


        }

        /**
         * { 定时刷新预览图片 }
         *
         * @method     updatePreviewDiv
         */
        this.updatePreviewDiv = function(jobIds) {
            var _this = this;
            var len = jobIds.length;

            $.each(jobIds, function(a, b) {
                var jobParams = {
                    jobId: b,
                    _disabledShowloading: true
                }
                ecCreativeTemplateModel.buildCreativeResult(jobParams, function(res) {
                    console.log(res)
                    if (res && res.status == 2) {
                        var tplId = res.ecTemplate.id;
                        //预览图未生成完，继续渲染
                        $.each(res.feedList, function(i, v) {
                            var t = '<div class="high-right-img"><a class="thumbnail" data-template-id="' + tplId + '" data-image="' + v.image_link + '"><img src="' + v.image_link + '"> </a></div>';
                            $(t).appendTo(self.$root.find('.high-right-container'));
                            return;
                        });
                        self.$root.find('.high-right-container .thumbnail-loading').remove();
                        console.log('done--' + b);
                        jobIds.splice($.inArray(b, jobIds), 1);
                        if (len-- == 0) {
                            window.clearTimeout(_this.stoupdataState);
                        }
                    }
                });
            });

            //定时刷新数据
            _this.stoupdataState = window.setTimeout(function() {
                _this.updatePreviewDiv(jobIds);
            }, 5000);
        }

        /**
         * { 第二步 高级编辑 下一步 提交 }
         *
         * @method     highSubmitCreate
         */
        this.highSubmitCreate = function(e) {
            var highPreviewImg = $(".high-right-container a");
            if (highPreviewImg.length) {
                self.kit.setCache(self.step2Key, 'imageUrl', highPreviewImg.data('image'));
            }
            //选择的模板有背景色
            if(self.whatBg) {
                var bgColDiv = self.$bgDiv.find('.bgColorActive');
                if(bgColDiv.length)
                    self.kit.setCache(self.step2Key, self.whatBg, bgColDiv.data('color').substring(1));
                else
                    self.kit.setCache(self.step2Key, self.whatBg, self.$bgDiv.find('input').val());
            }

            $('.fmp-container').trigger('enterStep3');
        }

        /**
         * { 第二步 高级编辑 重置 }
         *
         * @method     reset
         */
        this.reset = function() {
            self.$root.find('#ele-associate').prop("checked", true);
            self.elementsInFStyle = [];
            self.elementsInSStyle = [];
            self.initStep2HighView();
        }

    }

    return me;
});